import { FC, useEffect, useState, useRef } from 'react';
import { Input, Button, Tree, Space, Modal, message, Form } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import '../assets/scss/building.scss';
import ModalComponent from '../components/build/modal';
import { buildingList, buildingDel } from '../apis/building/index';

// 树形控件数据
const Building: FC<any> = (): JSX.Element => {
  // 树形控件数据
  const [treeData, setTreeData] = useState([]);
  // 自定义节点
  const drawerFieldNames = {
    title: 'name',
    key: 'id',
    children: 'children',
  };
  // 获取列表
  const getBuildings = async () => {
    const res = await buildingList(null);
    console.log(res);
    setTreeData(res.data.list);
  };

  useEffect(() => {
    getBuildings();
  }, []);

  // 组件对话框
  const ModalData: any = useRef();
  // 添加按钮
  const addChildNode = (val: any, num: number) => {
    ModalData.current.ModalOpen(val, num);
  };
  // 删除
  const { confirm } = Modal;
  const [messageApi, contextHolder] = message.useMessage();
  const delChilde = (val: number) => {
    confirm({
      title: '警告',
      icon: <ExclamationCircleFilled />,
      content: '确认删除该节点吗？',
      async onOk() {
        const res: any = await buildingDel(val);
        if (res.errCode == 10000) {
          messageApi.open({
            type: 'success',
            content: '删除成功',
          });
          getBuildings();
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  // 搜索框
  const [searchForm] = Form.useForm();
  const onFinish = (values: any) => {
    const { name } = values;
    if (name) {
      const filtered = filterTreeData(treeData, name);
      setTreeData(filtered);
    } else {
      getBuildings();
    }
  };
  const filterTreeData = (data: any, key: string) => {
    console.log(1111, data, key);
    return data.filter((node: any) => {
      if (node.name.includes(key)) {
        return true;
      }
      if (node.children) {
        const filteredChildren = filterTreeData(node.children, key);
        if (filteredChildren.length > 0) {
          node.children = filteredChildren;
          return true;
        }
      }
      return false;
    });
  };
  return (
    <div className="building">
      <div className="top">
        <span className="build r">楼栋管理</span>
        <Form
          form={searchForm}
          onFinish={onFinish}
          className="searchForm"
          style={{ maxWidth: 600 }}
        >
          <Form.Item name="name">
            <Input placeholder="请输入关键字进行过滤" />
          </Form.Item>
          <Form.Item>
            <Button
                type="primary" htmlType="submit">
              查询
            </Button>
            <span
              className="success"
              onClick={() => addChildNode({ id: 0, pid: 0 }, 0)}
            >
              添加小区
            </span>
          </Form.Item>
        </Form>
      </div>
      <div>
        <Tree
          treeData={treeData}
          fieldNames={drawerFieldNames}
          className="tree"
          style={{ maxWidth: '50vw' }}
          titleRender={(nodeData: any = {}) => {
            return (
              <div
                className="tree-node"
                style={{ display: 'flex', borderColor: 'salmon' }}
              >
                <div className="build-title">
                  <span>{nodeData[drawerFieldNames.title]}</span>
                </div>
                <div className="Button">
                  <Space size={6}>
                    <Button
                      type="primary"
                      onClick={() => addChildNode(nodeData, 0)}
                    >
                      添加子类
                    </Button>
                    <div
                      className="success"
                      onClick={() => addChildNode(nodeData, 1)}
                    >
                      修改
                    </div>
                    <Button
                      type="primary"
                      danger
                      onClick={() => delChilde(nodeData.id)}
                    >
                      删除
                    </Button>
                  </Space>
                </div>
              </div>
            );
          }}
        ></Tree>
      </div>
      {/* 添加对话框 */}
      <ModalComponent refs={ModalData} getList={getBuildings}></ModalComponent>
      {/* 删除对框框 */}
      {contextHolder}
    </div>
  );
};
export default Building;
